<template>
    <div class="z-input">
        <div>
            <i :class="['iconfont font28', icon]" v-if="icon"></i>
        </div>
        <input class="font28" :type="inputType ? inputType : 'text'" :placeholder="placeholder"/>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class ZInput extends Vue {
    @Prop() private placeholder!: string;
    @Prop() private icon!: string;
    @Prop() private inputType!: string;
}
</script>

<style lang="scss" scoped>
.z-input {
    width: 100%;
    height: 68px;
    padding: 7px 10px 21px 10px;
    border-width: 0;
    border-bottom: 1px solid #ddd;
    div {
        display: inline;
        width: 28px;
        height: 40px;
        margin-right: 10px;
    }
    input {
        width: calc(100% - 48px);
        height: 40px;
        border: none;
        color: #333;
    }
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #ddd;
    font-size: 28px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #ddd;
    font-size: 28px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #ddd;
    font-size: 28px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ddd;
    font-size: 28px;
}
</style>
